{% extends 'template/jhTemplateV4.html'%} {% block vueTemplate %}

<script id="app-template" type="text/html">
	<div>
		<v-app mobile-breakpoint="sm">
			<jh-menu />
			<v-main class="mt-15">
				<!-- 头部内容 >>>>>>>>>>>>> -->
				<div class="jh-page-second-bar px-8">
					<v-row>
						<v-col cols="12" xs="12" sm="12" md="4" xl="3">
							<div class="pt-3 text-h7 font-weight-bold">
								仪表盘
								<!-- 帮助页按钮 -->
								<v-icon @click="isHelpPageDrawerShown = true" color="success" small></v-icon>
									mdi-help-circle-outline
								</v-icon>
							</div>
							<v-breadcrumbs class="pb-3 pt-0 pl-0" :items="breadcrumbs" divider="-"></v-breadcrumbs>
						</v-col>
						<!-- 操作按钮组 -->
						<v-col cols="12" xs="12" sm="12" md="8" xl="9">
							<v-row class="jh-backend-form-container justify-end ma-0 py-1 pb-xs-2 mt-3">
								<div
									style="background-color: #fff; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 6px;"
									class="d-flex">
									<span style="font-size: 14px;color: #a5a9ab;">时间区间：</span>
									<v-icon style="color: #a5a9ab;" small class="mr-1">mdi-calendar</v-icon>
									<div style="display: inline-block">
										<v-menu ref="timeRangeRef" offset-y :close-on-content-click="false">
											<template v-slot:activator="{ on, attrs }">
												<span
													v-bind="attrs"
													v-on="on"
													style="letter-spacing: 0.5px; font-size: 14px; font-weight: 500; color: #5E6278;">
													{{timeRange && dayjs(timeRange[0]).format('YYYY-MM-DD')}} - {{timeRange &&
													dayjs(timeRange[1]).format('YYYY-MM-DD')}}
												</span>
											</template>
										</v-menu>
									</div>
								</div>
							</v-row>
						</v-col>
					</v-row>
				</div>
				<!-- <<<<<<<<<<<<< 头部内容 -->

				<div class="jh-page-body-container px-8">
					<!-- 页面内容 >>>>>>>>>>>>> -->
					<v-container class="fullScreen d-flex flex-column pa-xs-0 pa-0">
						<v-card style="background-color: #F2F2F2;" flat>
							<!-- 顶部各种率的卡片 >>>>>>>>>>>>> -->
							<dashboard-rateCard ref="dashboardRateCard"></dashboard-rateCard>
							<!-- <<<<<<<<<<<<< 顶部各种率的卡片 -->
							<!-- 运营状况和风险状况 >>>>>>>>>>>>> -->
							<dashboard-numSquare ref="dashboardNumSquare"></dashboard-numSquare>
							<!-- <<<<<<<<<<<<< 运营状况和风险状况 -->
							<!-- 一周统计图表 >>>>>>>>>>>>> -->
							<dashboard-chartCard ref="dashboardChartCard" @getData="getStatisticsChartData"></dashboard-chartCard>
							<!--<<<<<<<<<<<<  一周统计图表  -->
							<!-- 月度统计图表 未完成暂不显示 >>>>>>>>>>>>> -->
							<dashboard-chartCard
								ref="monthChartCard"
								v-show="false"
								@getData="getMonthlyStatisticsChartData"></dashboard-chartCard>
							<!-- 月度统计图表 >>>>>>>>>>>>> -->
						</v-card>
					</v-container>
					<!-- <<<<<<<<<<<<< 页面内容 -->
				</div>

				<!-- 帮助页抽屉 >>>>>>>>>>>>> -->
				<v-navigation-drawer
					v-model="isHelpPageDrawerShown"
					v-click-outside="drawerClickOutside"
					fixed
					temporary
					right
					width="80%"
					class="elevation-24">
					<iframe
						style="border: 0"
						:src="`/${appInfo.appId}/pageDoc#1.dashboard.md`"
						width="100%"
						height="100%"></iframe>

					<v-btn
						elevation="0"
						color="success"
						fab
						absolute
						top
						left
						small
						tile
						class="drawer-close-float-btn"
						@click="isHelpPageDrawerShown = false">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-navigation-drawer>
				<!-- <<<<<<<<<<<<< 帮助页抽屉 -->
			</v-main>
		</v-app>

		<jh-toast />
		<jh-mask />
		<jh-confirm-dialog />
	</div>
</script>

<div id="app"></div>

{% endblock %} {% block vueScript %}

<!-- 加载页面组件 >>>>>>>>>>>>> -->
<!-- {% include 'utility/echatViewUtil.html' %}
{% include 'component/common/chart.html' %} -->
{% include 'component/statistics/dashboard-numSquare.html' %} {% include 'component/statistics/dashboard-rateCard.html' %} {%
include 'component/statistics/dashboard-chartCard.html' %}
<!-- <<<<<<<<<<<<< 加载页面组件 -->

<!-- 加载第三方库js >>>>>>>>>>>>> -->
<script src="/<$ ctx.app.config.appId $>/public/plugin/echarts/echarts.min.js"></script>
<script src="/<$ ctx.app.config.appId $>/public/lib/dayjs/dayjs.min.js"></script>
<!-- <<<<<<<<<<<<< 加载第三方库js -->

<script type="module">
	new Vue({
		el: "#app",
		template: "#app-template",
		vueComponent: "page",
		vuetify: new Vuetify(),
		data: {
			// 面包屑
			breadcrumbs: [
				{
					text: "首页",
					disabled: true,
				},
				{
					text: "仪表盘",
					disabled: true,
				},
			],
			isHelpPageDrawerShown: false,
			// 时间区间
			timeRange: [dayjs().subtract(13, "day").startOf("day").format(), dayjs().endOf("day").format()],
			editItem: {},
			// echart常见的配置
			commonOptions: {
				line: {
					tooltip: {
						trigger: "axis",
					},
					legend: {
						data: [],
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					graphic: [],
					toolbox: {},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: [],
						axisLabel: {
							fontWeight: "bold",
						},
					},
					yAxis: {
						type: "value",
					},
					series: [],
				},
			},
		},
		watch: {},
		async created() {
			// window.onresize = () => {
			//     if (this.resetTime) clearTimeout(this.resetTime)
			//     this.resetTime = setTimeout(() => {
			//         this.viewsCount && this.viewsCount.resize()
			//         this.$refs.screenCommonChart && this.$refs.screenCommonChart.resize()
			//     }, 100)
			// }
		},
		async mounted() {
			// console.log("mounted");
			// await this.doUiAction('initEchart');
			await this.doUiAction("getConstantData");
			// await this.doUiAction("getStatisticsChartData");
			// let dayLabels = await this.doUiAction("getDatesBetween", {
			// 	startDate: dayjs(new Date()).subtract(7, "day").format("YYYY-MM-DD"),
			// 	endDate: dayjs(new Date()).format("YYYY-MM-DD"),
			// });
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "initEchart":
						await this.initEchart();
						break;
					case "detail":
						await this.prepareData(uiActionData);
						await this.openDetailDrawer();
						break;
					case "getConstantData":
						await this.getConstantData();
						break;
					// case "getStatisticsChartData":
					// 	debugger
					// 	await this.getStatisticsChartData(uiActionData);
					// 	break;
					case "getDatesBetween":
						await this.getDatesBetween(uiActionData);
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			// async getChartTimeRange(){
			//   // 获取今天的日期
			//   this.timeRange.endDate = dayjs(new Date()).format("YYYY-MM-DD");
			//   // 获取7天前的日期
			//   this.timeRange.startDate = dayjs(this.timeRange.endDate).subtract(7, 'day').format("YYYY-MM-DD")
			// },
			async getStatisticsChartData({ startDate, endDate }) {
				// this.$refs.
				this.handleChartLoading(true);
				let resultData = null;
				try {
					resultData = await window.jianghuAxios({
						data: {
							appData: {
								pageId: "statisticsManagement",
								actionId: "getStatisticsChartData",
								actionData: {
									startDate,
									endDate,
								},
							},
						},
					});
					let data = resultData.data.appData.resultData;
					// console.log("resultData",resultData);
					if (this.diffDays(startDate, endDate, 10)) {
						await window.vtoast.success("最多只能统计10天的数据");
					}
					const weekOptions = this.getWeekOptions(data);
					this.$refs.dashboardChartCard.setInitOptions(weekOptions);
					this.handleChartLoading(false);
				} catch (error) {
					console.log("error", error);
					this.handleChartLoading(false);
				}
			},
			// 获取月度报表数据
			async getMonthlyStatisticsChartData({ startDate, endDate }) {
				const monthlyOptions = this.getMonthOptions([]);
				this.$refs.monthChartCard.setInitOptions(monthlyOptions);
			},
			// 主要获取一周统计的配置
			getWeekOptions(data) {
				let rentDayOptions = this.getFeatureOption(data, "rentDay");
				let financialDayOptions = this.getFeatureOption(data, "financialDay");
				let maintenanceDayOptions = this.getFeatureOption(data, "maintenanceDay");
				return {
					leftOptions: rentDayOptions,
					middleOptions: financialDayOptions,
					rightOptions: maintenanceDayOptions,
				};
			},
			getMonthOptions(data) {
				let rentMonthOptions = this.getFeatureOption(data, "rentMonth");
				return {
					leftOptions: rentMonthOptions,
				};
			},
			// 获取各个图表的自己的配置
			getFeatureOption(data, type) {
				let featureOptions = {};
				let commonOptions = _.cloneDeep(this.commonOptions);
				switch (type) {
					case "rentDay":
						featureOptions = commonOptions.line;
						featureOptions.legend.data = ["当日已租", "当日已还"];
						featureOptions.graphic.push({
							type: "text",
							left: "center",
							top: "center",
							z: 100,
							style: {
								fill: "rgba(0, 0, 0, 0.1)",
								text: "租车趋势图",
								font: "bold 20px Microsoft YaHei",
							},
						});
						featureOptions.xAxis.data = this.splitXLabel(_.keys(data.rentalCountResult));
						featureOptions.series.push(
							{
								name: "当日已租",
								type: "line",
								data: _.values(data.rentalCountResult),
							},
							{
								name: "当日已还",
								type: "line",
								data: _.values(data.returnCarCountResult),
							}
						);
						break;
					case "financialDay":
						featureOptions = commonOptions.line;
						featureOptions.legend.data = ["当日已收", "当日已付"];
						featureOptions.graphic.push({
							type: "text",
							left: "center",
							top: "center",
							z: 100,
							style: {
								fill: "rgba(0, 0, 0, 0.1)",
								text: "财务趋势图",
								font: "bold 20px Microsoft YaHei",
							},
						});
						featureOptions.xAxis.data = this.splitXLabel(_.keys(data.dailyRevenue));
						featureOptions.series.push(
							{
								name: "当日已收",
								type: "line",
								data: _.values(data.dailyRevenue),
							},
							{
								name: "当日已付",
								type: "line",
								data: _.values(data.dailyExpenses),
							}
						);
						break;
					case "maintenanceDay":
						featureOptions = commonOptions.line;
						featureOptions.legend.data = ["当日维修", "当日保养"];
						featureOptions.graphic.push({
							type: "text",
							left: "center",
							top: "center",
							z: 100,
							style: {
								fill: "rgba(0, 0, 0, 0.1)",
								text: "车辆管理趋势图",
								font: "bold 20px Microsoft YaHei",
							},
						});
						featureOptions.xAxis.data = this.splitXLabel(_.keys(data.repairCount));
						featureOptions.series.push(
							{
								name: "当日维修",
								type: "line",
								data: _.values(data.repairCount),
							},
							{
								name: "当日保养",
								type: "line",
								data: _.values(data.maintenanceCount),
							}
						);
						break;
					case "rentMonth":
						featureOptions = {
							legend: {
								data: ["当月已租", "当月已还"],
							},
							tooltip: {
								trigger: "axis",
							},

							grid: {
								left: "3%",
								right: "4%",
								bottom: "3%",
								containLabel: true,
							},
							graphic: [],
							toolbox: {},
							xAxis: {
								type: "category",
								boundaryGap: false,
								data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
								axisLabel: {
									fontWeight: "bold",
								},
							},
							yAxis: {
								type: "value",
							},
							series: [
								{
									name: "当月已租",
									data: [120, 200, 150, 80, 70, 110, 130, 99, 111, 221, 111, 190],
									type: "bar",
									barWidth: 10,
									barCategoryGap: 5,
								},
								{
									name: "当月已还",
									data: [100, 260, 250, 180, 170, 210, 190, 199, 110, 220, 111, 190],
									type: "bar",
									barWidth: 10,
									barCategoryGap: 5,
								},
							],
						};
						break;
					default:
						break;
				}
				return featureOptions;
			},
			// 判断日期相隔天数
			diffDays(startDate, endDate, days) {
				return dayjs(endDate).diff(dayjs(startDate), "day") > days;
			},
			// 处理echart的loading
			async handleChartLoading(flag) {
				await this.$refs.dashboardChartCard.loading(flag);
			},
			splitXLabel(labels) {
				return labels.map(label => _.join(_.split(label, "-").splice(1, 2), "-"));
			},

			// 获取非图表数据
			async getConstantData() {
				this.numberData = (
					await window.jianghuAxios({
						data: {
							appData: {
								pageId: "statisticsManagement",
								actionId: "getConstantData",
								actionData: {},
							},
						},
					})
				).data.appData.resultData;
				this.$refs.dashboardRateCard.doUiAction("fetchRateConditionData", this.numberData);
				this.$refs.dashboardNumSquare.doUiAction("fetchConditionData", this.numberData);
			},
			getDatesBetween({ startDate, endDate }) {
				const dates = [];
				const start = new Date(startDate);
				const end = new Date(endDate);
				// 获取两个日期之间的毫秒数差值
				const timeDiff = Math.abs(end - start);
				// 计算日期之间的天数差
				const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
				// 循环生成日期数组
				for (let i = 0; i <= diffDays; i++) {
					const date = new Date(start.getTime() + i * 24 * 60 * 60 * 1000);
					dates.push(date.toISOString().substring(0, 10));
				}
				return dates;
			},
		},
	});
</script>

<style scoped="">
	.echartsContainer {
		width: 100%;
		height: 300px;
	}

	.overview {
		width: 100%;
		height: 277px;
	}

	.smallBox {
		height: 500px;
	}

	.v-application ol,
	.v-application ul {
		padding: 5px 0;
	}

	.v-application ol,
	.v-application ul li {
		display: flex;
		padding: 2px 0;
		/* border-bottom: 1px solid #eee; */
	}

	.v-application ol,
	.v-application ul li a {
		flex: 1;
	}

	.block-item {
		height: 340px;
	}

	.block-item:nth-child(4n) > div {
		margin-right: 0 !important;
	}

	.chart-title {
		font-size: 14px;
		font-weight: 600;
	}

	.theme--light.v-divider,
	.theme--light.v-navigation-drawer .v-divider {
		border-color: #f4f5f6;
	}

	.pageBodyContainer a {
		color: #4caf50 !important;
		text-decoration: none;
	}
</style>
{% endblock %}
